<template>
  <div class="config-container">
    <a-form :model="attrs.modelForm" :rules="attrs.rules" :ref="attrs.formRef">
      <a-form-item
        class="config-form-item"
        label="名称"
        field="name"
        label-col-flex="0px"
        required
      >
        <a-input
          placeholder="请输入"
          v-model.trim="attrs.modelForm.name"
          @change="handleExistedChange"
        />
      </a-form-item>
      <a-form-item
        class="config-form-item"
        label="编码"
        field="code"
        disabled
        label-col-flex="0px"
        required
      >
        <a-input placeholder="请输入" v-model.trim="attrs.modelForm.code" />
      </a-form-item>
      <a-form-item
        class="config-form-item window-form"
        label="窗宽*窗位"
        field="value"
        label-col-flex="0px"
        required
        v-if="attrs.modelForm.parentId === 6"
      >
        <a-input
          placeholder="请输入"
          v-model.trim="windowVal[0]"
          @change="handleChange"
        />
        <span class="tip">*</span>
        <a-input
          placeholder="请输入"
          v-model.trim="windowVal[1]"
          @change="handleChange"
        />
      </a-form-item>
      <a-form-item
        class="config-form-item versiopn-form"
        label="版本"
        field="value"
        label-col-flex="0px"
        required
        v-if="attrs.modelForm.parentId === 7"
      >
        <a-input placeholder="请输入" v-model.trim="attrs.modelForm.value" />
      </a-form-item>
    </a-form>
  </div>
</template>
<script lang="ts" setup name="ConfigModal">
import { useAttrs, computed, ref, type Ref } from "vue";
import * as Api from '@/api/configCenter/configCenter';
import type { FieldRule, ButtonProps } from "@arco-design/web-vue";
import * as BaseDataUtils from '../utils/useBaseData';

const attrs = useAttrs() as {
  modelForm: any;
  title: string;
  isParent: boolean;
  rules: Record<string, FieldRule<any> | FieldRule<any>[]> | undefined;
  formRef: Ref<any>;
  okButtonProps: ButtonProps;
  viewMode: string;
};
// const flag = computed(() => attrs.title.includes("新建"));
let windowVal = ref();
if (attrs.viewMode === BaseDataUtils.viewMode.CREATE) {
  windowVal.value = [null, null];
} else {
  windowVal.value = attrs.modelForm.value.split("*");
}
const handleChange = (value: string) => {
  attrs.modelForm.value = windowVal.value.join('*');
};
const handleExistedChange = async (value: string) => {
  const params = {
    id: attrs.modelForm.id,
    parentId: attrs.modelForm.parentId,
    name: value
  }
  const res = await Api.getExisted(params);
  if (res.code === 200 && res.data.result) {
    attrs.okButtonProps.disabled = true;
    attrs.formRef.value.setFields({
      name: {
        status: "error",
        message: "标签名称已存在",
      },
    })
  }
  if (res.code === 200 && !res.data.result) {
    attrs.okButtonProps.disabled = false;
  }
}
</script>
<style lang="less" scoped>
@import url("../styles/configModal.less");
</style>
